import { useStore } from '@/store'
import { LoginForm } from '@/type'
import { Button, NavBar, Form, Input, List, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

import styles from './index.module.scss'

const Login = () => {
  // 这里需要给values做类型注解 values 表单对象 interface / type
  // mobile/code  都是string类型
  const store = useStore()
  const navigate = useNavigate()
  const onFinish = async (values: LoginForm) => {
    await store.userStore.login(values)
    // 跳转
    Toast.show({
      content: '登录成功',
      position: 'top',
      duration: 1000,
      afterClose: () => {
        navigate('/', { replace: true })
      },
    })
  }
  return (
    <div className={styles.root}>
      <NavBar></NavBar>
      {/* 表单区域 */}
      <div className="login-form">
        <h2 className="title">账号登录</h2>
        <Form onFinish={onFinish}>
          <Form.Item
            name="mobile"
            className="login-item"
            rules={[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式错误',
              },
            ]}>
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <List.Item className="login-code-extra">
            <Form.Item
              name="code"
              className="login-item"
              rules={[{ required: true, message: '请输入密码' }]}>
              <Input placeholder="请输入验证码" autoComplete="off" />
            </Form.Item>
          </List.Item>

          <Form.Item noStyle>
            <Button
              block
              type="submit"
              color="primary"
              className="login-submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Login
